<template>
  <div>
    <!-- 合同管理 -->

    <!-- 搜索框 -->
    <el-form ref="SearchForm" :model="SearchForm" label-width="60px">
      <el-row>

        <el-col :span="5">
          <el-form-item label="编号" label-width="60px">
            <el-input placeholder="请输入编号" v-model="SearchForm.searchByResourceName" />
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="使用状态" label-width="110px">
            <el-select v-model="SearchForm.searchByContractType" placeholder="请选择" style="width:230px">
              <el-option v-for="key in contractTypeKeys" :key="key" :label="key" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户姓名" label-width="100px">
            <el-input placeholder="请输入客户姓名" v-model="SearchForm.searchByuserName" />
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="searchMassage" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item>
            <el-button @click="resetFields" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 下载 -->
    <el-button type="primary" @click="downloadFileTemplate" icon="el-icon-s-tools">默认收费项（出租）</el-button>

    <!-- 上传 -->
    <el-button type="primary" @click="beforeUpload" icon="el-icon-s-tools">默认收费项（出售）</el-button>

    <!-- 数据展示--表格 -->
    <el-table :data="tableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="resourceName" label="商铺编号" align="center">
      </el-table-column>

      <el-table-column prop="contractType" label="使用状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.contractType == 'rented'" type="success">已出租</el-tag>
          <el-tag v-if="scope.row.contractType == 'selled'" type="warning">已出售</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="公司名" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" align="center">
      </el-table-column>

      <el-table-column prop="userPhone" label="电话" align="center">
      </el-table-column>

      <el-table-column prop="rental" label="租金" align="center">
      </el-table-column>

      <el-table-column prop="userTrade" label="行业" align="center">
      </el-table-column>

      <el-table-column prop="beginDate" label="开始时间" align="center">
      </el-table-column>

      <el-table-column prop="endDate" label="结束时间" align="center">
      </el-table-column>

      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="beroreSubmitModifyForm(scope.row)" size="small">发起合同</el-button>
          <el-button type="text" @click="beforeDeleteItemById(scope.row)" size="small" style="color:#FF6459">编辑合同</el-button>
          <el-button type="text" @click="beforeDeleteItemById(scope.row)" size="small" style="color:#FF6459">删除合同</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10,15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      url_Get_getPaymentContractList:
        "http://localhost:8080/getPaymentContractList",
      // 搜索框搜索数据的表单
      SearchForm: {
        searchByResourceName: "",
        searchByContractType: "",
        searchByuserName: "",
      },

      // 使用状态下拉框
      contractType: {
        已出租: "rented",
        已出售: "selled",
      },

      // 分页数据
      pageNum: 1,
      pageSize: 5,
      total: "",
    };
  },

  methods: {
    // 分页
    handleSizeChange(val) {
      this.getPaymentContractList(this.pageNum, val, "", "", "");
    },
    handleCurrentChange(val) {
      this.getPaymentContractList(val, this.pageSize, "", "", "");
    },

    searchMassage() {
      this.getPaymentContractList(
        this.pageNum,
        this.pageSize,
        this.SearchForm.searchByResourceName,
        this.contractType[this.SearchForm.searchByContractType],
        this.SearchForm.searchByuserName
      );
    },

    // 重置字段
    resetFields() {
      (this.SearchForm.searchByResourceName = ""),
        (this.SearchForm.searchByContractType = ""),
        (this.SearchForm.searchByuserName = ""),
        this.getPaymentContractList(1, 5, "", "", "");
    },

    // 获取列表数据
    getPaymentContractList(
      pageNum,
      pageSize,
      resourceName,
      contractType,
      userName
    ) {
      this.$http
        .get(this.url_Get_getPaymentContractList, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            resourceName: resourceName,
            contractType: contractType,
            userName: userName,
          },
        })
        .then((result) => {
          this.tableData = result.data.data.list;
          this.pageNum = result.data.data.pageNum;
          this.pageSize = result.data.data.pageSize;
          this.total = result.data.data.total;
        })
        .catch((err) => {
          this.$message({
            message: "获取列表失败",
            type: "error",
          });
        });
    },
  },

  // 计算属性
  computed: {
    // 获取使用状态的key
    contractTypeKeys() {
      return Object.keys(this.contractType);
    },
  },

  mounted() {
    this.getPaymentContractList(this.pageNum, this.pageSize, "", "", "");
  },
};
</script>

<style>
</style>